// pages/shishiLine/index.js
const app = getApp();
var util = require('../../utils/md5.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    lng:'',
    lat:'',
    markers:[],
    polyline:[{
      points:[],//线路转折点
      width:7,
      colorList:["#d29200","#ffb900","#fff100","#d83b01","#ea4300","#ff8c00","#a4262c","#d13438","#5c005c","#b4009e","#e3008c","#5c2d91","#b4a0ff","#002050","#00188f","#0078d4","#00bcf2","#004b50","#008272","#00b294","#004b1c","#107c10","#bad80a"],
      borderColor:"#b8b8b8"
    }],
    idx:'',
    buslines:[],
    next_stat:'--',
    next_dist:'--',
    showLabel:true
  },
refreshBtn:function(e){
  wx.showLoading({
    title: '请求公交车位置信息中',
  })
  this.getBusPositionNow();
},
//添加一个方法，是请求公交车实时位置信息的，
getBusPositionNow(){
  let that = this;
  //首先请求笑园的公交线路接口
  let key = '05d64a8244c9a4b13483d50ce6dc1b27';
  let keySec = util.hexMD5('18818441944'+key+'luxian');
  wx.request({
    url: 'http://api.wxbus163.cn/z_busapi/BusApi.php',
    method:'GET',
    data:{
      optype:'luxian',
      uname:'18818441944',
      cityid:'85',//广州市的城市id是85
      keywords:that.data.zhandian,//几路公交
      keySecret:keySec,//是uname+key+optype三者结合，md5加密。
    },
    success:function(res){
      console.log("关键词：",that.data.zhandian)
      console.log("校园公交路线的数据：",JSON.stringify(res));//这个公交数据其实是有点乱的，不如haoservice的好用,
      if(res.data.return_code=='error'){
        wx.showToast({
          title: '获取公交实时位置失败',
        });
        wx.hideLoading();  
      }
      if(res.data.error_code == '003'){
        wx.hideLoading();
        wx.showToast({
          title: '线路数据失败，请手动刷新',
        });
      }
      // if(res.data.returl_list.length == 0 || res.data.returl_list[0].bus_staname != that.data.zhandian){
      //   wx.showToast({
      //     title: '公交线路查询出错，无法查询实时位置',
      //   })
      // }
        //再发送一次请求，请求公交车的实时位置信息。
        var keySec2 =util.hexMD5('18818441944'+key+'rtbus');
        wx.request({
          url: 'http://api.wxbus163.cn/z_busapi/BusApi.php',
          data:{
            optype:'rtbus',
            uname:'18818441944',
            cityid:'85',//广州市的城市id是85
            keywords:that.data.zhandian,//几路公交
            bus_linestrid:res.data.returl_list[0].bus_linestrid,//线路id“NDQwMTAwMDE2MTg2”
            bus_linenum:res.data.returl_list[0].bus_linenum,//线路编号“440100”
            bus_staname:res.data.returl_list[0].bus_staname,//线路名称“109路”
            keySecret:keySec2,//是uname+key+optype三者结合，md5加密。
          },
          success:function(r){
            console.log("实时位置接口：",r)
            that.refreshBusposition(r);//调用刷新公交车位置的按钮
          }
        })
      

    }
  })
  
},

//刷新公交车实时位置的marker，经度差1度就相聚80到110千米了
refreshBusposition(val){
  let that = this;
  let bus_positions = val.data.returl_list.buses;
  console.log("公交位置信息：",bus_positions);
  that.setData({
    bus_info:bus_positions//这个公交车实时信息还是保存起来，显示详情时有用
  })
  //先计算一下，之前是否已经将公交站点加入了markers里面
  let current_bus_number = that.data.markersArr_bk.length - that.data.markers_number;
  console.log("当前marker中，新增了多少辆公交车：",current_bus_number);
  if(current_bus_number>0){//先前push了多少辆公交车，这里就弹出多少辆，避免污染
    for(let k=0;k<current_bus_number;k++){
      that.data.markersArr_bk.pop();//备份弹出
      that.data.markers_null.pop();//空的弹出
    };
  }
  for(let i=0;i<bus_positions.length;i++){
    let mark = {
      id: i,//直接使用i作为id了，方便点击触发事件时进行寻找对应的数组元素
      iconPath: "/images/gongjiaoche.png",
      longitude:Number(bus_positions[i].longing),
      latitude:Number(bus_positions[i].lating),
      width: 60,
      height: 60,
      zIndex: 50//层级比公交车站高一点
    };
    //直接push不行，这样会污染了原来的公交车站点的markers
  that.data.markersArr_bk.push(mark);//备份的加入实时公交车
  that.data.markers_null.push(mark);//空的也加入实时公交车
  }
  //刷新一下界面
  that.setData({
    // markersArr_bk:that.data.markers,
    // markers_null:that.data.markers_null//这个空的不确定是否也要进行界面刷新
    markers:that.data.markersArr_bk //刷新一下界面，默认刷新之后显示标签吧。。
  })
  console.log("当前地图的marker数量：",that.data.markers.length)
  console.log("当前地图的marker：",that.data.markers)
  wx.hideLoading();
},

//添加一个mark触发方法，用来显示点击的公交车的实时位置
markerTopch:function(event){

console.log(event);//查看一下mark点击事件触发的到底是什么
console.log("当前点击的marker的id：",event.detail.markerId)
console.log("距离下一个站点的距离："+this.data.bus_info[event.detail.markerId].distance+"米")
console.log("下一个站点：",this.data.bus_stops[this.data.bus_info[event.detail.markerId].dis_stat - 1]);
  this.setData({
    next_stat: this.data.bus_stops[this.data.bus_info[event.detail.markerId].dis_stat - 1].name,
    next_dist: this.data.bus_info[event.detail.markerId].distance
  })
},

//绘制polyline和公交站点的方法
drawPolylineAndMarker(options){
  let that = this;
  console.log("点击的路线顺序："+options.idx);
  console.log("线路数据：+",app.globalData.buslines);
  that.setData({//这两个数据存起来，虽然感觉存起来也没什么用
    idx:options.idx,
    buslines:app.globalData.buslines,
    zhandian:options.zhandian//这个数据时上个页面传输的第几路。
  })
  //单独拿一条线路出来，对数据进行处理，处理为markers，和polyline。。。。
  console.log('公交车第几路：',that.data.zhandian);
 console.log('查看一下这条线路的站点：',app.globalData.buslines[0])
 console.log('查看一下这条线路的站点：',app.globalData.buslines[0].busstops)
 let bus_Stations = app.globalData.buslines[Number(options.idx)].busstops;

  let markerArr = [];
  let markerArr_null = [];
  let pointArr = [];
  //先处理polyline的数据
  let single_pointArr = app.globalData.buslines[Number(options.idx)].polyline.split(";");
  console.log("公交线路polyline:",single_pointArr)
  for(let j=0;j<single_pointArr.length;j++){
    let long_lati = single_pointArr[j].split(',');
    let point = {
      longitude:long_lati[0],
      latitude:long_lati[1]
    }
    pointArr.push(point);
  }
  //对数据处理,得到经纬度信息，并且设定好marker
  for(var i=0;i<bus_Stations.length;i++){
    //根据公交车站点的多少来决定绘制多少个marker
    let lng_lat = bus_Stations[i].location.split(",");//将经纬度信息切开
   
    let marker = {
      //公交站点的marker的id都设置成负数，方便和公交车实时位置的marker进行区分
      id: Math.abs(Number(bus_Stations[i].sequence)) * -1,//这个id字段必须设置为number类型的，不然在触发markerTap事件的时候，id会对应不上（老bug了，腾讯两年都没修）
      iconPath: "/images/busstop.png",
      longitude:lng_lat[0],
      latitude:lng_lat[1],
      width: 20,
      height: 20,
      zIndex:1,//这个层级最低就行
      label:{
        content:bus_Stations[i].name,
        color:'#002329',
        fontSize:12,
        borderWidth:4,
        borderColor:'#10239e',
        borderRadius:8,
        bgColor:'#e6f7ff',
        padding:4,
        textAlign:"center",
        // anchorX:'',//偏移量
        // anchorY:''
      }
    };
    
    markerArr.push(marker);//拥有正常公交站点markers
    
    let marker_null = that.copyobj(marker);//深拷贝一个新的对象，然后将其content设置为null。
    marker_null.label.content = '';
    markerArr_null.push(marker_null);//和正常公交站点一样，只是content都没有内容
  }
  let markersArr_backup = that.copyobj(markerArr);//深拷贝一个正常的marker，用作标杆
  //页面数据同步
  this.setData({
    markers:markerArr,//默认是有标签的marker，这个marker只是用来显示的，增删操作用下面两个进行操作
    markersArr_bk : markersArr_backup,//原初版本，作备份
    markers_null:markerArr_null,//这个没有标签的markers是用来切换的
    markers_number:markerArr.length,//记录一下初试有多少个公交站点，这个记录不要变动，是后面计算有多少辆实时公交车的标杆
    'polyline[0].points':pointArr,
    lng:bus_Stations[0].location.split(",")[0],
    lat:bus_Stations[0].location.split(",")[1],
    bus_stops:bus_Stations//公交站点信息也是存起来，其他地方需要使用
  })
},

//添加一个标签是否显示按钮
switchLabel:function(e){
  if(this.data.showLabel == true){
    this.setData({
      showLabel:false,
      markers:this.data.markers_null
    });
  }else{
    this.setData({
      showLabel:true,
      markers:this.data.markersArr_bk
    })
  }
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.drawPolylineAndMarker(options);//绘制公交路线以及相关站点
    this.refreshBtn();//获取公交车实时位置
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //对象深浅拷贝的方法
  copyobj(a){
    var c={};
    c=JSON.parse(JSON.stringify(a));
    return c;
}
})